<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="index-small.css">
    <title>home</title>
</head>

<body>
    <!-- 主页整体html 复制此部分 -->
    <div class="home-box">
        <div class="home-row home-col-space15">
            <div class="home-col-xs3">
                <!-- 实时档案情况 -->
                <div class="home-show-box" style="height: 600px;">
                    <div class="home-show-title">实时档案情况</div>
                    <table class="home-show-table">
                        <thead>
                            <tr>
                                <th>区名称</th>
                                <th>养老服务<br>补贴人数</th>
                                <th>失能护理<br>补贴人数</th>
                                <th>高领<br>津贴人数</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 17条数据 -->
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="home-show-table-more">
                        <a href="#">更多>></a>
                    </div>
                </div>
            </div>
            <div class="home-col-xs6">
                <!-- 2020年4月发放账单情况 -->
                <div class="home-show-box" style="height: 600px;">
                    <div class="home-show-title-center">2020年4月发放账单情况</div>
                    <div class="home-map-total">
                        <div class="home-map-block">
                            <div class="home-map-icon">
                                <img src="images/ico-home-map01.png" alt="">
                                <p>养老服务补贴</p>
                            </div>
                            <div class="home-map-text">
                                <h1>2321<span>人</span></h1>
                                <h1>257.00<span>万元</span></h1>
                            </div>
                        </div>
                        <div class="home-map-block">
                            <div class="home-map-icon">
                                <img src="images/ico-home-map02.png" alt="">
                                <p>失能护理补贴</p>
                            </div>
                            <div class="home-map-text">
                                <h1>2321<span>人</span></h1>
                                <h1>257.00<span>万元</span></h1>
                            </div>
                        </div>
                        <div class="home-map-block">
                            <div class="home-map-icon">
                                <img src="images/ico-home-map03.png" alt="">
                                <p>高龄津贴</p>
                            </div>
                            <div class="home-map-text">
                                <h1>2321<span>人</span></h1>
                                <h1>257.00<span>万元</span></h1>
                            </div>
                        </div>
                    </div>
                    <!-- 地图 -->
                    <div class="home-map">
                        预留地图位置，限高 460px
                    </div>
                </div>
            </div>
            <div class="home-col-xs3">
                <!-- 2020年5月资金发放进度情况 -->
                <div class="home-show-box" style="height: 600px;">
                    <div class="home-show-title">2020年5月资金发放进度情况</div>
                    <table class="home-show-table">
                        <thead>
                            <tr>
                                <th>区名称</th>
                                <th>进入状态</th>
                                <th>发放人数</th>
                                <th>发放金额<br>（万元）</th>
                            </tr>
                        </thead>
                        <tbody>
                            <!-- 17条数据 -->
                            <tr>
                                <td>东城区</td>
                                <td class="color-7bcef7">未确认</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td class="color-9edfff">待确认</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>已确认</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                            <tr>
                                <td>东城区</td>
                                <td>2434</td>
                                <td>2434</td>
                                <td>2434</td>
                            </tr>
                        </tbody>
                    </table>
                    <div class="home-show-table-more">
                        <a href="#">更多>></a>
                    </div>
                </div>
            </div>
        </div>
        <div class="home-row home-col-space15">
            <div class="home-col-xs3">
                <!-- 实时档案持卡人情况 -->
                <div class="home-show-box">
                    <div class="home-show-title">档案持卡人人数情况</div>
                    <div id="echartsPro"></div>
                </div>
            </div>
            <div class="home-col-xs6">
                <!-- 年度资金发放人数和资金变化情况 -->
                <div class="home-show-box">
                    <div class="home-show-title">年度资金发放人数和资金变化情况</div>
                    <div class="home-show-sel">
                        <select name="" id="">
                            <option value="">2019年</option>
                        </select>
                    </div>
                    <div id="echartsLine"></div>
                </div>
            </div>
            <div class="home-col-xs3">
                <!-- 预警提示情况 -->
                <div class="home-show-box">
                    <div class="home-show-title">预警提示情况</div>
                    <div id="echartsRad"></div>
                </div>
            </div>
        </div>
        <div class="home-row home-col-space15">
            <div class="home-col-xs3">
                <!-- 高龄津贴老人档案年龄分布情况 -->
                <div class="home-show-box">
                    <div class="home-show-title">高龄津贴老人档案年龄分布情况</div>
                    <div id="echartsPie"></div>
                </div>
            </div>
            <div class="home-col-xs6">
                <!-- 失能护理补贴人员档案分布情况-->
                <div class="home-show-box">
                    <div class="home-show-title">失能护理补贴人员档案分布情况</div>
                    <div id="echartsBar"></div>
                </div>
            </div>
            <div class="home-col-xs3">
                <!-- 养老服务补贴人员档案分布情况 -->
                <div class="home-show-box">
                    <div class="home-show-title">养老服务补贴人员档案分布情况</div>
                    <div id="echartsPieSimble"></div>
                </div>
            </div>
        </div>
    </div>
    <!-- 主页整体html 复制此部分 -->
    <!-- echarts js 在线定制 只含有部分图表 -->
    <script src="echarts.min.js"></script>
    <script src="index-small.js"></script>
</body>

</html>